<script setup lang="ts">
import footerBtn from "@/components/footerBtn/index.vue";
import { useTheme } from "@/composables/useTheme";
import hideWechatMenu from "@/composables/hideWechatMenu";
import { hidePageNavInWechatBrowser } from "@/composables/useHiddenNavbar";
import { onHide, onLoad, onReady, onShow, onUnload } from "@dcloudio/uni-app";
import { getList, setMarketype } from "@/api/user";
import { Tips } from "@/utils";
import Cache from "@/utils/cache";
onReady(() => {
  hidePageNavInWechatBrowser();
});
onShow(() => {
  hideWechatMenu();
});
onUnload(() => {
  clearInterval(timer.value);
});
onHide(() => {
  clearInterval(timer.value);
});
onLoad(() => {
  getListHandler();
});
// 获取行情数据start----------
let tableData = ref([
  {
    id: "spot",
    title: "现货行情",
    list: [],
  },
  {
    id: "domestic",
    title: "国内行情",
    list: [],
  },
  {
    id: "international",
    title: "国际行情",
    list: [],
  },
  {
    id: "exchangerate",
    title: "美元汇率",
    list: [],
  },
]);
let marketListRef = ref([]);
let timer = ref(null);
async function getListHandler() {
  let { data } = await getList();
  let list = data.gold_list;
  list.forEach((item) => {
    item.list.forEach((_item) => {
      _item.is_web_show = !!+_item.is_web_show;
    });
  });
  tableData.value = list;

  // marketListRef.value = data;
  // setTabalDataHandler();
  // clearInterval(timer.value);
  // timer.value = setInterval(() => {
  //   getListHandler();
  // }, 3000);
}
function setTabalDataHandler() {
  for (const key in marketListRef.value) {
    tableData.value.forEach((item) => {
      if (item.id == key) {
        item.list = marketListRef.value[key];
        item.list.forEach((_item) => {
          _item.is_web_show = !!+_item.is_web_show;
        });
      }
    });
  }
  console.log(tableData.value);
}
// 获取行情数据end----------
const { colorStyle } = useTheme();
function submitHandler() {
  console.log("确认点击");
}
const checkboxChange = (e, i, j) => {
  let id = tableData.value[i].list[j].id;
  let is_web_show = e;
  setMarketype({ id, is_web_show }).then((res) => {
    // Tips({ title: res.info });
  });

  console.log("change", e, i, j);
};
</script>
<template>
  <view class="wrap" :style="colorStyle">
    <view class="container">
      <template v-for="(item, index) in tableData" :key="index">
        <view class="tabale_item" v-if="item.list.length">
          <view class="tabale_title">
            {{ item.title }}
          </view>
          <view class="table_box" :class="{ hidde_title: !is_market_title }">
            <uni-table ref="table" stripe emptyText="暂无更多数据">
              <uni-tr>
                <uni-th width="87" align="center">
                  <view class="table_th"> 商品</view>
                </uni-th>
                <uni-th width="87" align="center">
                  <view class="table_th"> 回购 </view>
                </uni-th>
                <uni-th width="87" align="center">
                  <view class="table_th"> 销售 </view>
                </uni-th>
                <uni-th width="87" align="center">
                  <view class="table_th"> 开启 </view>
                </uni-th>
              </uni-tr>

              <uni-tr v-for="(_item, _index) in item.list" :key="_index">
                <uni-td align="center">
                  <view class="table_td name_td">{{ _item.code_name }}</view>
                </uni-td>
                <uni-td align="center">
                  <view
                    class="table_td"
                    :class="[
                      { colorRed: _item.colour_bidprice == 1 },
                      { colorGreen: _item.colour_bidprice == 2 },
                      {
                        colorGreenLight:
                          Cache.get('themeValue') &&
                          Cache.get('themeValue') == 'dark',
                      },
                    ]"
                  >
                    {{ _item.bidprice || "--" }}
                  </view>
                </uni-td>
                <uni-td align="center">
                  <view
                    class="table_td"
                    :class="[
                      { colorRed: _item.colour_askprice == 1 },
                      { colorGreen: _item.colour_askprice == 2 },
                      {
                        colorGreenLight:
                          Cache.get('themeValue') &&
                          Cache.get('themeValue') == 'dark',
                      },
                    ]"
                  >
                    {{ _item.askprice || "--" }}
                  </view>
                </uni-td>
                <uni-td align="center">
                  <view class="table_td flex_c">
                    <up-switch
                      inactiveColor="rgb(178, 189, 194)"
                      activeColor="var(--view-theme)"
                      size="20"
                      v-model="_item.is_web_show"
                      @change="(e) => checkboxChange(e, index, _index)"
                    ></up-switch>
                    <!-- <up-checkbox-group
                      placement="column"
                      @change="(e) => checkboxChange(e, index, _index)"
                    >
                      <up-checkbox
                        :name="_item.id"
                        :checked="_item.is_web_show"
                      >
                      </up-checkbox>
                    </up-checkbox-group> -->
                  </view>
                </uni-td>
              </uni-tr>
            </uni-table>
          </view>
        </view>
      </template>
    </view>

    <!-- <view class="uni-p-b-98"></view>
    <footerBtn @submitHandler="submitHandler" title="保存设置" /> -->
  </view>
</template>

<style scoped lang="scss">
::v-deep .uni-table {
  min-width: auto !important;
  background: unset !important;
  .uni-table-scroll {
    overflow: visible;
  }
  // 改表头字体样式
  .uni-table-th {
    border: none;
    border-right: none;
    background: var(--view-th1-color);
    font-size: 24rpx;
    font-weight: normal;
    color: var(--view-th-font-color);
  }
  .table--border {
    border: none;
  }
  .uni-table-td {
    border: none;
    padding-top: 25rpx;
    padding-bottom: 25rpx;
  }
  .uni-table-tr:nth-child(2n + 2),
  .uni-table-tr:nth-child(2n + 2):hover {
    background: var(--view-th2-color);
  }
  .uni-table-tr:nth-child(2n + 3),
  .uni-table-tr:nth-child(2n + 3):hover {
    background: var(--view-th3-color);
  }
}
.wrap {
  // max-width: 750rpx;
  margin: 0 auto;
  padding-top: 30rpx;
  min-height: 100vh;
  background: var(--view-linear-home-bg);
  position: relative;
  .tabale_item {
    .table_box {
      width: 720rpx;
      margin: 0 auto;
      border: 2px solid var(--view-tabale-border);
      border-radius: 16rpx;
      margin-bottom: 20rpx;
      // background: rgba(255, 255, 255, 0.45);
      overflow: hidden;

      .table_th {
        font-size: 34rpx;
        font-weight: bold;
      }
      .table_td {
        // font-weight: 600;
        font-size: 38rpx;
        line-height: 50rpx;
        color: var(--view-tabale-title);
      }
      .name_td {
        font-size: 36rpx;
        font-weight: normal;
        white-space: nowrap;
      }
      .font_samll {
        line-height: 40rpx;
        font-size: 36rpx;
      }
    }
    .tabale_title {
      color: var(--view-tabale-title);
      text-align: center;
      font-family: Source Han Serif CN;
      font-size: 34rpx;
      line-height: 43rpx;
      letter-spacing: 10rpx;
      text-align: center;
      margin-bottom: 20rpx;
      font-weight: bold;
    }
  }
}
</style>
